<template>
  <uni-nav-bar title="我的客户" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="width:100%;" v-for="item in orderLists" :key="item.id">
      <view class="package_sale space-between list">
        <view class="center" style="width: 50%;">
          <image :src="item.avatar" mode=""></image>
          <text style="margin: 0px 10rpx;max-width: 200rpx;">{{item.nickname}}</text>
          <uni-icons :type="item.is_show===1?'bottom':'top'" size="20" @click="changes(item.is_show,item.id)"
            v-if="item.child_list.length>0"></uni-icons>
        </view>
        <view class="direction-start" style="align-items: flex-end;font-size: 26rpx;color: #666;">
          <view>贡献金额：{{item.staff_driver_withdrawal}}</view>
          <view style="margin-top: 10rpx;">直推释放比例：{{item.zhitui_bfb}}</view>
        </view>
      </view>
      <view class="package_sale space-between below" v-for="items in item.child_list" :key="items.id"
        :style="{display:item.is_show===1?'none':'flex'}">
        <view class="center" style="width: 50%;">
          <image :src="items.avatar" mode=""></image>
          <text style="margin: 0px 10rpx;max-width: 150rpx;">{{items.nickname}}</text>
        </view>
        <view class="direction-start" style="align-items: flex-end;font-size: 26rpx;color: #666;">
          <view>贡献金额：{{items.staff_driver_withdrawal}}</view>
          <view style="margin-top: 10rpx;">间推释放比例：{{items.jiantui_bfb}}</view>
        </view>
      </view>
    </view>
    <Popu v-if="orderLists.length<1" :pageHeight="pageHeight" text="暂无客户信息"></Popu>
  </scroll-view>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import Popu from '@c/earthPushing/common/popu.vue';
  import { ref } from 'vue';
  import { getStaffUserList } from '@/gql/earthPushing/custom';
  import { toPublish } from '@mqtt';
  import { showLoading } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();
  const pageHeight = ref()
  const orderLists = ref([]);
  const lastPage = ref(1);
  const currentPage = ref(1);
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 50
    },
  });
  init()
  function init() {
    showLoading()
    const payload = {
      query: getStaffUserList,
      variables: {
        page: currentPage.value,
        staff_id,
      },
    };
    toPublish(
      'ql/staff/getStaffUserList',
      payload,
      (obj : any) => {
        const { getStaffUserList } = obj.data;
        orderLists.value = [...orderLists.value, ...getStaffUserList.list];
        lastPage.value = getStaffUserList.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  function changes(show : number, id : number) {
    const num = show === 1 ? 2 : 1
    orderLists.value = orderLists.value.filter((item) => item.id == id ? item.is_show = num : item)
  }
</script>

<style scoped lang="less">
  .list:nth-last-child(1) {
    border-bottom: 0px;
  }

  .list {
    border-bottom: 1px solid #eee;
    margin: 0px;

    image {
      width: 66rpx;
      height: 66rpx;
      background: #EAEAEA;
      border-radius: 50%;
    }
  }

  .below {
    padding: 20rpx 20rpx 20rpx 80rpx;
    border-bottom: 1px solid #eee;
    margin: 0px;

    image {
      width: 52rpx;
      height: 52rpx;
      background: #EAEAEA;
      border-radius: 50%;
    }
  }
</style>